<!-- 简历分析总结组件 -->
<template>
  <div class="summary-evaluation">
    <a-collapse v-model:activeKey="activeKeys" :bordered="false">
      <a-collapse-panel key="1" header="优势">
        <a-list item-layout="horizontal" :data-source="strengths">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #description>
                  <div class="evaluation-item">
                    <check-circle-outlined style="color: #52c41a; margin-right: 8px" />
                    {{ item }}
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="2" header="短板">
        <a-list item-layout="horizontal" :data-source="weaknesses">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #description>
                  <div class="evaluation-item">
                    <exclamation-circle-outlined style="color: #faad14; margin-right: 8px" />
                    {{ item }}
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="3" header="简历修改建议">
        <a-list item-layout="horizontal" :data-source="suggestions">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #description>
                  <div class="evaluation-item">
                    <bulb-outlined style="color: #1890ff; margin-right: 8px" />
                    {{ item }}
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="4" header="潜在风险">
        <a-list item-layout="horizontal" :data-source="risks">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #description>
                  <div class="evaluation-item">
                    <warning-outlined style="color: #ff4d4f; margin-right: 8px" />
                    {{ item }}
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  BulbOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue'

const props = defineProps({
  strengths: {
    type: Array,
    required: true,
    default: () => [],
  },
  weaknesses: {
    type: Array,
    required: true,
    default: () => [],
  },
  suggestions: {
    type: Array,
    required: true,
    default: () => [],
  },
  risks: {
    type: Array,
    required: true,
    default: () => [],
  },
})

const activeKeys = ref(['1', '2', '3', '4'])
</script>

<style scoped>
.summary-evaluation {
  padding: 16px;
}

.evaluation-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  line-height: 1.6;
}

.suggestion-item {
  display: flex;
  align-items: center;
  margin-left: 24px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(24, 144, 255, 0.06);
  border-radius: 4px;
  color: #1890ff;
  line-height: 1.6;
}

:deep(.ant-collapse-header) {
  font-weight: bold !important;
  font-size: 16px !important;
  color: #1890ff !important;
}

:deep(.ant-collapse-content-box) {
  padding: 16px 0 !important;
}
</style>
